<script setup lang="ts">
defineOptions({
    name: 'workCalendarList'
});

const route = useRoute();
const component = {
    workingHours: defineAsyncComponent(() => import('./view/WorkingHours/index.vue')),
    shiftSystem: defineAsyncComponent(() => import('./view/ShiftSystem/index.vue')),
    workCalendar: defineAsyncComponent(() => import('./view/WorkCalendar/index.vue'))
};

const name = 'workingHours';

const activeName = ref<keyof typeof component>(
    (route.params.name as keyof typeof component) || name
);
</script>
<template>
    <div class="work-view">
        <!-- 通过类名控制显隐 -->
        <el-tabs v-model="activeName">
            <el-tab-pane label="工作时段" name="workingHours" />
            <el-tab-pane label="班制" name="shiftSystem" />
            <el-tab-pane label="工作日历" name="workCalendar" />
        </el-tabs>
        <q-suspense>
            <keep-alive>
                <component :is="component[activeName]"></component>
            </keep-alive>
        </q-suspense>
    </div>
</template>

<style scoped lang="scss">
// 通过类名控制显隐
@include b(workingPeriod) {
    :deep() {
        .el-tabs__item:nth-child(2) {
            display: none;
        }
    }
}

@include b(classSystem) {
    :deep() {
        .el-tabs__item:nth-child(3) {
            display: none;
        }
    }
}

@include b(workingCalendar) {
    :deep() {
        .el-tabs__item:nth-child(4) {
            display: none;
        }
    }
}

@include b(work-view) {
    display: flex;
    flex: 1;
    flex-direction: column;
}
</style>
